<!DOCTYPE html>
<html lang="zh-CN"  xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/header.css}" rel="stylesheet">
    <link th:href="@{/css/user.css}" rel="stylesheet">
    <link th:href="@{/css/fileinput.min.css}" rel="stylesheet">
</head>
<body>
<!--<div class="col-md-9 col-sm-12">
    <div class="user-info-box">
        <div class="user-info-inner-box">
            <h2 style="margin-bottom:25px">个人信息</h2>
            <form class="form-horizontal" id="regForm" method="post" th:action="@{/index/reg}">
                <div class="form-group">
                    <label class="col-sm-3 control-label">头像</label>
                    <div class="col-sm-8">
                        <img style="width:100px;height:100px" id="imgEmdImg" class="img-circle">
                        <button type="button" id="btnImg" class="btn btn-default" data-dismiss="modal">修改头像</button>
                    </div>
                </div>
                <script>
                    let imgEmdImg = ""; //定义初始头像  我这里定义为空

                    //初始化fileinput
                    let FileInput = function () {
                        let oFile = {};

                        //初始化fileinput控件（第一次初始化）
                        oFile.Init = function (ctrlName, uploadUrl) {
                            let control = $('#' + ctrlName);

                            //初始化上传控件的样式
                            control.fileinput({
                                language: 'zh', //设置语言
                                uploadUrl: uploadUrl, //上传的地址
                                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                                showUpload: true, //是否显示上传按钮
                                showCaption: false,//是否显示标题
                                browseClass: "btn btn-primary", //按钮样式
                                //dropZoneEnabled: false,//是否显示拖拽区域
                                //minImageWidth: 50, //图片的最小宽度
                                //minImageHeight: 50,//图片的最小高度
                                //maxImageWidth: 1000,//图片的最大宽度
                                //maxImageHeight: 1000,//图片的最大高度
                                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                                //minFileCount: 0,
                                maxFileCount: 1, //表示允许同时上传的最大文件个数
                                enctype: 'multipart/form-data',
                                validateInitialCount: true,
                                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                            });

                            //导入文件上传完成之后的事件
                            $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {

                                let dataR = data.response;
                                let last = dataR.lastIndexOf("Upload");
                                EmImg = dataR.substring(last + 7);
                                //document.getElementById('videoForm').outerHtml = document.getElementById('videoForm').outerHtml;
                                //document.getElementById("videoForm").reset();
                                $("#Modal").modal('hide');
                                $("#imgEmdImg").attr("src", "../FileUpload/Upload/" + EmImg);
                                //alert(EmImg);
                                //1.初始化表格
                                //var oTable = new TableInit();
                                //oTable.Init(data);
                            });
                        }
                        return oFile;
                    };

                </script>
                <script>
                    //上传头像
                    let oFileInput = new FileInput();
                    oFileInput.Init("txt_file", "/Employee/UploadFile");    //注意：这里是导入地址写好你的控制器  和方法名**

                    //弹出添加图片模态
                    $("#btnImg").click(function () {
                        $("#Modal").modal("show");
                    });

                </script>
            </form>
        </div>
    </div>
</div>-->
<!--<div id="Modal">
    <div class="modal-body">
        <from id="videoForm">
            <input id="txt_file" type="file">
        </from>

    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭

        </button>
        <button id="btnClose" type="button" class="btn btn-primary">
            返回
        </button>
    </div>
</div>-->
<!--<div class="col-sm-10">
    <div class="file-loading">
        <input id="uploadFile" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">
    </div>
</div>-->
<form>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="myModalLabel">请选择头像图片</h4>
                </div>
                <div class="modal-body">
                    <a th:href="@{/imgs/7.jpg}" class="form-control" style="border:none;">使用默认头像</a>
                    <input type="file" name="txt_file" id="txt_file" multiple class="file-loading"/>
                </div>
            </div>
        </div>
    </div>
</form>
</body>

<script th:src="@{/js/jquery-1.11.0.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/common.js}"></script>
<script th:src="@{/js/button.js}"></script>
<script th:src="@{/js/user/userInfo.js}"></script>
<script th:src="@{/js/fileinput/fileinput.min.js}"></script>
<script th:src="@{/js/fileinput/zh.js}"></script>
<script th:src="@{/js/fileinput/myfileinput.js}"></script>
</html>